<template>
    <el-container>
        <el-main>
            <el-form status-icon label-width="140px" ref="form" :rules="rules" :model="form">
                <el-form-item label="医生名称" prop="ysName">
                    <el-input v-model="form.ysName" placeholder="请输入医生名称" />
                </el-form-item>
                <el-form-item label="服务项目">
                    <el-input v-model="form.fwxm" placeholder="请输入服务项目" />
                </el-form-item>
                <el-form-item label="服务项目描述">
                    <el-input v-model="form.fwxmInfo" placeholder="请输入服务价格描述" />
                </el-form-item>
                <el-form-item label="服务价格">
                    <el-input v-model="form.fwjg" placeholder="请输入服务价格" />
                </el-form-item>
                <el-form-item label="服务价格描述">
                    <el-input v-model="form.fwjgInfo" placeholder="请输入服务价格描述" />
                </el-form-item>
                <el-form-item label="标签1">
                    <el-input v-model="form.ysrc" placeholder="请输入医生标签，如'博士'" />
                </el-form-item>
                <el-form-item label="标签2">
                    <el-input v-model="form.ysjb" placeholder="请输入医生标签，如'隐形美讲师'" />
                </el-form-item>
                <el-form-item label="标签3">
                    <el-input v-model="form.ysjy" placeholder="请输入医生标签，如'15年'" />
                </el-form-item>
                <el-card v-for="(item, index) in form.zsList" :key="item.index">
                    <template #header class="clearfix">
                        <span>诊所{{index+1}}</span>
                        <el-button v-if="index > 0" type="text" @click.prevent="removeZs(item)" style="float: right; padding: 3px 0">删除
                        </el-button>
                    </template>
                    <el-form-item label="诊所名称" :prop="`zsList.${index}.zsName`" :rules="rules.zsName">
                        <el-input v-model="item.zsName" placeholder="请输入诊所名称，如'北京德陪尔齿科'" />
                    </el-form-item>
                    <el-form-item label="城市/县区/路" class="form_item_no_label " :prop="`zsList.${index}.city`" :rules="rules.city">
                        <el-input style="width: 180px" v-model="item.city" placeholder="城市" />
                    </el-form-item>
                    <el-form-item class="form_item_no_label" label-width="0px">
                        <el-input style="width: 180px" v-model="item.dist" placeholder="县区" />
                    </el-form-item>
                    <el-form-item class="form_item_no_label" label-width="0px" :prop="`zsList.${index}.street`" :rules="rules.street">
                        <el-input style="width: 180px" v-model="item.street" placeholder="路" />
                        <span>注意：城市不需要填写"市/县"，比如"深圳"只需要输入"深圳"而非"深圳市"</span>
                    </el-form-item>
                    <el-form-item label="可定位地址" prop="addr">
                        <el-input v-model="item.addr" placeholder="请输入详细地址" />
                        <span>注意：接着上一步填写如"xx号xx大厦x楼x室"或"xx号"</span>
                    </el-form-item>
                    <el-form-item label="可预约时间提示">
                        <el-input v-model="item.orderTimeTip" placeholder="请输入可预约时间提示" />
                    </el-form-item>
                    <el-form-item label="状态">
                        <el-radio-group v-model="item.status">
                            <el-radio :label="0">歇业打烊</el-radio>
                            <el-radio :label="1">正在预约</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <div v-for="(dateItem, dateIndex) in item.dates" :key="dateIndex">
                        <el-form-item :label="`可预约时间提示${dateIndex+1}`" :prop="`zsList.${index}.dates.${dateIndex}.times`" :rules="rules.times">
                            <el-date-picker type="datetimerange" v-model="dateItem.times" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" />
                            <el-button @click="removeZsDate(index, dateIndex)">
                                删除可预约时间
                            </el-button>
                        </el-form-item>
                    </div>
                    <el-form-item>
                        <el-button @click="addZsDate(index)">
                            新增可预约时间
                        </el-button>
                    </el-form-item>
                </el-card>
                <el-form-item>
                    <el-button @click="addZs">新增诊所</el-button>
                </el-form-item>
                <el-card v-for="(item,index) in form.infos" :key="item.index">
                    <template #:header class="clearfix">
                        <span>信息展示{{index+1}}</span>
                        <el-button @click.prevent="removeInfo(item)" type="text" style="float: right; padding: 3px 0">删除
                        </el-button>
                    </template>
                    <el-form-item label="标题" :prop="`infos.${index}.title`" :rules="rules.infoTitle">
                        <el-input v-model="item.title" placeholder="请输入标题,如:学历" />
                    </el-form-item>
                    <el-form-item label="标题描述" :prop="`infos.${index}.text`" :rules="rules.infoText">
                        <el-input class="input_textarea" type="textarea" placeholder="请输入标题描述" v-model="item.text" :rows="8" />
                    </el-form-item>
                </el-card>
                <el-form-item>
                    <el-button @click="addInfo">新增信息展示</el-button>
                </el-form-item>
                <el-form-item label="是否置顶">
                    <el-radio-group v-model="form.dz">
                        <el-radio :label="0">否</el-radio>
                        <el-radio :label="1">是</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item>
                    <PrimaryButton text="保存" :click="doAdd" />
                </el-form-item>
            </el-form>
        </el-main>
    </el-container>
</template>

<script>
import { create, goBack } from '@/chaos/functions/mixin/pushcrud';

export default {
    name: 'AddDocter',
    mixins: [create, goBack],
    data() {
        const rules = {
            ysName: [
                {
                    required: true,
                    message: '请输入医生姓名',
                    trigger: 'blur'
                }
            ],
            zsName: [
                {
                    required: true,
                    message: '请输入诊所名称',
                    trigger: 'blur'
                }
            ],
            infoTitle: [
                {
                    required: true,
                    message: '标题不能为空',
                    trigger: 'blur'
                }
            ],
            infoText: [
                {
                    required: true,
                    message: '标题描述不能为空',
                    trigger: 'blur'
                }
            ],
            city: [
                {
                    required: true,
                    message: '城市不能为空',
                    trigger: 'blur'
                }
            ],
            street: [
                {
                    required: true,
                    message: '路不能为空',
                    trigger: 'blur'
                }
            ],
            times: [
                {
                    required: true,
                    type: 'array',
                    message: '可预约时间不能为空',
                    trigger: 'blur'
                }
            ]
        };
        return {
            domain: 'iya_doctor',
            indexPath: 'doctors',
            form: {
                infos: [
                    {
                        title: '',
                        text: ''
                    }
                ],
                zsList: [
                    {
                        zsName: '',
                        city: '',
                        dist: '',
                        street: '',
                        addr: '',
                        orderTimeTip: '',
                        dates: [],
                        status: 0
                    }
                ],
                dz: 0
            },
            rules
        };
    },
    methods: {
        addInfo() {
            this.form.infos.push({
                title: '',
                desc: ''
            });
        },
        removeInfo(item) {
            let index = this.form.infos.indexOf(item);
            if (index !== -1) {
                this.form.infos.splice(index, 1);
            }
        },
        addZs() {
            this.form.zsList.push({
                zsName: '',
                city: '',
                dist: '',
                street: '',
                addr: '',
                orderTimeTip: '',
                dates: []
            });
        },
        removeZs(item) {
            let index = this.form.zsList.indexOf(item);
            if (index > 0) {
                this.form.zsList.splice(index, 1);
            }
        },
        addZsDate(index) {
            this.form.zsList[index].dates.push({ times: [] });
        },
        removeZsDate(index, dateIndex) {
            this.form.zsList[index].dates.splice(dateIndex, 1);
        }
    }
};
</script>
<style lang="less" scoped>
/deep/ .el-card__body {
    padding: 20px 0;
    color: red;
}

.el-form {
    width: 1200px;
}

.el-input {
    width: 540px;
}

.input_textarea {
    width: 540px;
}

span {
    margin-left: 20px;
}

.form_item_no_label {
    display: inline-block;
}
</style>
